<template>
  <div class="personal same-change-oldstyle">
     <div class="same-head-box">
        <div class="saem-seat-box">
          <div class="saem-seat-left">
            <span>当前位置：</span>
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>设置</el-breadcrumb-item>
                <el-breadcrumb-item>账户设置</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
          <div class="saem-seat-right">
            <button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
            <!-- <button class="same-search-btns" @click="returnBack">返回</button> -->
          </div>
        </div>
      </div>
    <div class="wrap">
      <div class="step">
        <div v-for="(item,index) in stepList" :key="item" class="step-cell" :class="{checked:currentStep>index}">
          <div class="cirle">{{index+1}}</div>
          <div class="name" :class="{'arrow':stepList.length>index+1}">{{item}}</div>
        </div>
      </div>
      <template v-if="currentStep==1">
        <div class="first-step">
          <div class="ipt-cell">
            当前登录账户的
          </div>
          <div class="ipt-cell">
            <label for="company-name">姓名</label>
            <el-input  size="medium" v-model="name" placeholder="请输入姓名" maxlength="11"></el-input>
            <span class="must">*</span>
          </div>
          <!-- <div class="ipt-cell">
            <label for="company-name">电话</label>
            <el-input v-model="phone" maxlength="11" placeholder="请输入电话"></el-input>
            <span class="must">*</span>
          </div> -->
          <div class="ipt-cell">
            <label for="company-name">身份证号</label>
            <el-input size="medium" v-model="id_card" maxlength="18" placeholder="请输入身份证号"></el-input>
            <span class="must">*</span>
          </div>

        </div>

        <el-button type="primary" size="medium" class="next-btn"  @click="nextSecond">下一步</el-button>
      </template>
      <template v-if="currentStep==2">

        <div class="card-pic">
          <div class="front">
            <img src="/static/images/card_z.png" v-if="frontCard==''" alt="身份证正面">
            <el-image class="id-card-img" fit="scale-down" lazy :src="frontCard" :preview-src-list="[frontCard]" v-else>
            </el-image>
            <el-upload :on-error="uploadError" :on-progress="uploadProgress" class="upload-demo" accept="image/*"
              name="file" :action="upload_url" :before-upload="beforeUpload" :on-success="uploadFrontSuccess"
              :show-file-list="false">
              <div class="upload-btn">上传身份证头像面</div>
            </el-upload>
          </div>

          <div class="end">
            <img src="/static/images/card_f.png" v-if="backCard==''" alt="身份证反面">
            <el-image class="id-card-img" fit="scale-down" lazy :src="backCard" :preview-src-list="[backCard]" v-else>
            </el-image>
            <el-upload :on-error="uploadError" :on-progress="uploadProgress" class="upload-demo" accept="image/*"
              name="file" :action="upload_url" :before-upload="beforeUpload" :on-success="uploadBackSuccess"
              :show-file-list="false">
              <div class="upload-btn">上传身份证国徽面</div>
            </el-upload>
          </div>
        </div>

        <div class="sample">
          <span class="txt">示例</span>
          <img src="/static/images/idcard-positive.png" alt="">
          <div class="tips">
            <p>1、身份证需要在有效期内</p>
            <p>2、照片必须清晰</p>
            <p>3、照片支持JPG\JPEG\PNG格式，最大不超过5M</p>
          </div>
        </div>

        <div class="group-btns">
          <el-button  size="medium" @click="prev">上一步</el-button>
          <el-button  size="medium" type="primary" @click="submit">提 交</el-button>
        </div>
      </template>

      <template v-if="currentStep==3">
        <div class="success">
          <i class="el-icon-success"></i>
          <div class="look" @click="lookAuthentic">查看认证</div>
        </div>
      </template>

    </div>
  </div>
</template>

<script>
  import { validate } from '@/lib/js/validate'
  export default {
    name: "personal",
    data() {
      return {
        upload_url: process.env.API_ROOT + "Common/Common/upload",
        // phone: "", //电话
        name: "", //姓名
        id_card: "", //身份证号码
        stepList: ["填写基本信息", "上传证件信息", "完成"],
        currentStep: 1,
        frontCard: "", //身份证正面
        backCard: "", //身份证反面
        personal_ID_card_head_img: "",//身份证头像面图片
        personal_ID_card_national_emblem: "", //身份证国徽面图片
      };
    },

    created() {
      const id = this.$route.query.id;
      if (id) {
        this.id = id;
        this.getAuthentication();
      }
    },
    inject: ["reload"],
    methods: {
      RefreshFun() {
        // 调用reload方法，刷新整个页面
        this.reload();
      },
      //返回
      returnBack() {
        this.$router.back(-1);
      },
      getAuthentication() {
        this.$post({
          url: "Partner/Setup/get_authentication",
          success: res => {
            if (res.code == 1000) {
              if (res.data) {
                const data = res.data;
                this.name = data.personal_name;
                // this.phone = data.personal_tel;
                this.id_card = data.personal_ID_card;
                this.frontCard = data.personal_ID_card_head_img_link;
                this.backCard = data.personal_ID_card_national_emblem_link;
                this.personal_ID_card_head_img = data.personal_ID_card_head_img;
                this.personal_ID_card_national_emblem = data.personal_ID_card_national_emblem;
              } else {
                this.id = "";
              }
            } else {
              this.$message.error(res.message);
            }
            console.log(res);
          }
        })
      },



      uploadProgress() {
        this.loading = this.$loading({
          lock: true,
          text: '图片上传中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
      },
      uploadError() {
        this.loading.close();
      },

      //第三步查看认证
      lookAuthentic() {
        this.$router.push({
          path: '/authentication'
        })
      },

      beforeUpload(file) {
        const isLt5M = file.size / 1024 / 1024 < 5;
        if (!isLt5M) {
          this.$message.error('上传图片大小不能超过 5MB!');
        }
        return isLt5M;
      },



      //上传正面成功
      uploadFrontSuccess(e) {
        this.loading.close();
        if (e.code === 1000) {
          this.$message.success("身份证头像面上传成功");
          this.frontCard = e.data.all_url;
          this.personal_ID_card_head_img = e.data.url;
        } else {
          this.$message.error(e.message);
        }
      },

      //上传背面成功
      uploadBackSuccess(e) {
        this.loading.close();
        if (e.code === 1000) {
          this.$message.success("身份证国徽面上传成功");
          this.backCard = e.data.all_url;
          this.personal_ID_card_national_emblem = e.data.url;
        } else {
          this.$message.error(e.message);
        }
      },


      //第二页的上一步按钮
      prev() {
        this.currentStep = 1;
      },


      //第二步的提交按钮
      submit() {
        if (validate._isNullOrEmpty(this.personal_ID_card_head_img)) {
          this.$message.error("请上传身份证头像面");
          return;
        }
        if (validate._isNullOrEmpty(this.personal_ID_card_national_emblem)) {
          this.$message.error("请上传身份证国徽面");
          return;
        }
        this.$post({
          url: "Partner/Setup/person_authentication",
          data: {
            id: this.id,
            personal_name: this.name,
            // personal_tel: this.phone,
            personal_ID_card: this.id_card,
            personal_ID_card_head_img: this.personal_ID_card_head_img,
            personal_ID_card_national_emblem: this.personal_ID_card_national_emblem
          },
          success: res => {
            if (res.code === 1000) {
              this.$message.success("个人资料完善成功");
              setTimeout(() => {
                this.currentStep = 3;
              }, 2000)
            } else {
              this.$message.error(res.message);
            }
          }
        })
      },


      //第一页的下一步按钮
      nextSecond() {
        if (validate._isNullOrEmpty(this.name)) {
          this.$message.error("请填写姓名");
          return;
        }
        // if (validate._isNullOrEmpty(this.phone)) {
        //   this.$message.error("请填写电话");
        //   return;
        // }
        // if (!validate._isMobile(this.phone)) {
        //   this.$message.error("电话号码格式错误");
        //   return;
        // }
        if (validate._isNullOrEmpty(this.id_card)) {
          this.$message.error("请填写身份证号码");
          return;
        }
        if (!validate._isIdCard(this.id_card)) {
          this.$message.error("身份证号码错误");
          return;
        }
        this.currentStep = 2;
      },
    }
  };
</script>

<style scoped>
  .wrap {
    padding: 0 40px;
  }

  .step {
    margin: 0 40px;
    display: flex;
    border-bottom: 1px solid #cdcdcd;
    box-sizing: border-box;
  }

  .step-cell {
    display: flex;
    align-items: center;
  }

  .cirle {
    width: 20px;
    height: 20px;
    background: rgba(179, 179, 179, 1);
    border-radius: 50%;
    font-size: 14px;
    color: #fff;
    line-height: 20px;
    text-align: center;
  }

  .checked .cirle {
    background: rgba(44, 85, 134, 1);
  }

  .name {
    color: #999999;
    font-size: 16px;
  }

  .name {
    color: #999999;
    margin: 20px 50px 20px 10px;
    position: relative;
  }

  .checked .name {
    color: #2c5586;
  }

  .checked .arrow:before {
    border-color: #2c5586;
  }

  .arrow:before {
    content: " ";
    height: 12px;
    width: 12px;
    border-width: 3px 3px 0 0;
    border-color: #999999;
    border-style: solid;
    -webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
    transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
    position: absolute;
    top: 50%;
    margin-top: -7px;
    right: -30px;
  }

  .first-step {
    margin: 0 40px;
    border-bottom: 1px solid #cdcdcd;
    padding: 30px 0 100px 0;
  }

  .ipt-cell {
    display: flex;
    align-items: center;
    width: 500px;
    margin-top: 20px;
  }

  .ipt-cell label {
    width: 180px;
    font-size: 14px;
  }

  .must {
    margin-left: 10px;
    color: #FF6565;
  }

  .next-btn {
   margin-top: 20px;
   margin-left: 40px;
  }

  .upload-btn {
    width: 206px;
    height: 32px;
    line-height: 32px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(217, 217, 217, 1);
    border-radius: 5px;
    color: #666666;
    margin-top: 5px;
  }

  .card-pic {
    margin: 0 40px;
    display: flex;
    padding: 20px 0px 50px;
  }

  .card-pic .end {
    margin-left: 30px;
  }

  .sample {
    padding-bottom: 30px;
    display: flex;
    margin: 0 40px;
    border-bottom: 1px solid rgba(230, 230, 230, 1);
  }

  .sample .txt {
    color: #FF6565;
    margin-right: 20px;
  }

  .sample img {
    height: 100px;
  }

  .sample .tips {
    margin-left: 20px;
    line-height: 30px;
    color: #999999;
    font-size: 14px;
  }

  .group-btns {
    display: flex;
    margin: 20px 40px 0 40px;
  }

  .group-btns div {
    width: 80px;
    height: 32px;
    border-radius: 5px;
    line-height: 32px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
  }


  .group-btns .prex {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(44, 85, 134, 1);
    color: #2C5586;
  }

  .group-btns .sub {
    background: #2C5586;
    color: #fff;
    margin-left: 10px;
  }

  .success {
    width: 158px;
    padding: 100px 0 0 240px;
    text-align: center
  }

  .success i {
    color: #2C5586;
    font-size: 120px;
  }

  .look {
    cursor: pointer;
    width: 100%;
    height: 32px;
    margin-top: 20px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(44, 85, 134, 1);
    border-radius: 5px;
    text-align: center;
    line-height: 32px;
    color: #2C5586;
  }

  .id-card-img {
    width: 206px;
    height: 127px;
  }
</style>
